<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础使用</text>
         <view class="uv-demo-block__content">
            <uv-input
               placeholder="请输入内容"
               border="surround"
               v-model="value"
               @change="change"
            ></uv-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">可清空内容</text>
         <view class="uv-demo-block__content">
            <uv-input placeholder="请输入内容" border="surround" clearable></uv-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">数字键盘</text>
         <view class="uv-demo-block__content">
            <uv-input placeholder="请输入内容" border="surround" type="number" clearable></uv-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">密码类型</text>
         <view class="uv-demo-block__content">
            <uv-input placeholder="请输入内容" border="surround" password></uv-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">显示下划线</text>
         <view class="uv-demo-block__content">
            <uv-input placeholder="请输入内容" border="bottom" clearable></uv-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">禁用状态</text>
         <view class="uv-demo-block__content">
            <uv-input placeholder="禁用状态" border="surround" disabled></uv-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">圆形</text>
         <view class="uv-demo-block__content">
            <uv-input placeholder="请输入内容" border="surround" shape="circle"></uv-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">前后图标</text>
         <view class="uv-demo-block__content">
            <uv-input
               placeholder="前置图标"
               prefixIcon="search"
               prefixIconStyle="font-size: 22px;color: #909399"
            ></uv-input>
         </view>
         <view class="uv-demo-block__content" style="margin-top: 15px">
            <uv-input
               placeholder="后置图标"
               suffixIcon="map-fill"
               suffixIconStyle="color: #909399"
            ></uv-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">前后插槽</text>
         <view class="uv-demo-block__content">
            <uv-input placeholder="前置插槽">
               <!-- vue3模式下必须使用v-slot:prefix -->
               <template v-slot:prefix>
                  <uv-text text="http://" margin="0 3px 0 0" type="tips"></uv-text>
               </template>
            </uv-input>
         </view>
         <view class="uv-demo-block__content" style="margin-top: 15px">
            <uv-input placeholder="后置插槽">
               <!-- vue3模式下必须使用v-slot:suffix -->
               <template v-slot:suffix>
                  <uv-code
                     ref="uCode"
                     :seconds="20"
                     changeText="X秒重新获"
                     @change="codeChange"
                  ></uv-code>
                  <uv-button @click="getCode" :text="tips" type="success" size="mini"></uv-button>
               </template>
            </uv-input>
         </view>
      </view>
      <uv-gap bgColor="#fff" height="50"></uv-gap>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const value = ref('内容');
const tips = ref('');
const uCode = ref();

const change = (e: any) => {
   console.log(e);
};

const codeChange = (e: string) => {
   tips.value = e;
};

const getCode = () => {
   if (uCode.value.canGetCode) {
      // 模拟向后端请求验证码
      uni.showLoading({
         title: '正在获取验证码',
      });
      setTimeout(() => {
         uni.hideLoading();
         // 这里此提示会被this.start()方法中的提示覆盖
         uni.$uv.toast('验证码已发送');
         // 通知验证码组件内部开始倒计时
         uCode.value.start();
      }, 2000);
   } else {
      uni.$uv.toast('倒计时结束后再获取');
   }
};
</script>

<style lang="scss" scoped></style>
